<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('MsHCoyIPokcy60Pbzf_N0')}}</p>
      <div class="operate-area">
        <div class="inline-item btn-item">
          <Button type="primary" icon="md-add" @click="addCustomerIcCard"
            >{{$t('2-j5G9nU9vlg8GK29wJ0O')}}</Button
          >
        </div>
        <!-- <div class="inline-item btn-item">
          <Button type="info" icon="md-add" @click="icCardManager"
            >{{$t('MsHCoyIPokcy60Pbzf_N0')}}</Button
          >
        </div>
        <div class="inline-item btn-item">
          <Button type="info" icon="md-add" @click="vipSetting"
            >{{$t('7xpLZr4gJe_1iH3U0EllU')}}</Button
          >
        </div> -->
      </div>
      <Table
        :loading="loading"
        :columns="columns"
        :data="data"
      >
        <template slot-scope="{ row }" slot="enableflag">
          <span :class="['ivu-btn-ghost br-bold', row.enableflag == 1 ? 'ivu-btn-success' : 'ivu-btn-error' ]">{{ row.enableflag == 1 ? '√' : '×' }}</span>
        </template>
      </Table>
      <Modal
        v-model="formModal"
        :title="formTitle"
        footer-hide
        :mask-closable="false"
      >
        <form-info
          v-if="formModal"
          :status="status"
          :data="formData"
          @success="success"
          @fail="fail"
          @close="close"
        />
      </Modal>
      <Modal
        v-model="rechargeFormModal"
        :title="$t('NT1CZWpckoQpEr56J6ngo')"
        footer-hide
        :mask-closable="false"
      >
        <recharge
          v-if="rechargeFormModal"
          :data="rechargeFormData"
          @success="rechargeSuccess"
          @fail="rechargeFail"
          @close="close"
        />
      </Modal>
      <Modal
        v-model="recordFormModal"
        :title="$t('1pvGh7nzkgNiEGic7c8tj')"
        footer-hide
        :mask-closable="false"
        width="1000"
      >
        <record v-if="recordFormModal" :selectCardId="selectCardId" />
      </Modal>
    </Card>
  </div>
</template>

<script>
import { getCustomerCardIdList, deleteCustomerCardId } from '@/api/data2'
import FormInfo from './components/icForm'
import Recharge from './components/recharge'
import Record from './components/record'
export default {
  name: 'ic_card_list',
  components: {
    FormInfo,
    Recharge,
    Record
  },
  props: {
    customId: String
  },
  data () {
    return {
      selectCardId: null,
      formModal: false,
      rechargeFormModal: false,
      recordFormModal: false,
      status: 'new',
      customName: '',
      customNumber: '',
      loading: false,
      columns: [
        {
          title: this.$t('o9MoZ8GYpy_bxl_Uh62i0'),
          key: 'id',
          width: 150
        },
        {
          title: this.$t('z3zbpYCEXz3ftVHT73-gC'),
          key: 'custid',
          width: 150
        },
        {
          title: this.$t('3yOzuIWEQ3p9BkAsscQFo'),
          key: 'pwd',
          width: 150
        },
        {
          title: this.$t('vlcfeLzbR37D0GdQdbaoj') + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'balance',
          width: 150
        },
        {
          title: this.$t('kdueTuMiiPrb0TQo3qoDg'),
          slot: 'enableflag',
          width: 150
        },
        {
          title: this.$t('56vXCivLJ43HZO4QrXiG-'),
          key: 'cardpeople',
          width: 150
        },
        {
          title: this.$t('DR_JAfOAhYyyKOCArMM5X'),
          key: 'createdt',
          width: 200
        },
        {
          title: this.$t('Ty1ns2epHIaihi82jwUfc'),
          fixed: 'right',
          width: 320,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'warning',
                    size: 'small',
                    icon: 'ios-create'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editItem(params.index)
                    }
                  }
                },
                this.$t('3cH_U2GeBUW1V74W8oDNv')
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small',
                    icon: 'md-trash'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.deleteItem(params.index)
                    }
                  }
                },
                this.$t('hND4KLgCabT6swtTJBIUf')
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                    icon: 'logo-usd'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.rechargeItem(params.index)
                    }
                  }
                },
                this.$t('Ywv2X5XkMicIrgIbaCZI3')
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small',
                    icon: 'md-recording'
                  },
                  on: {
                    click: () => {
                      this.recordItem(params.index)
                    }
                  }
                },
                this.$t('1pvGh7nzkgNiEGic7c8tj')
              )
            ])
            // return h('div', [
            //   h('Button', {
            //     props: {
            //       type: 'primary',
            //       size: 'small',
            //       icon: 'ios-search'
            //     },
            //     style: {
            //       marginRight: '5px'
            //     },
            //     on: {
            //       click: () => {
            //         this.icQuery(params.index)
            //       }
            //     }
            //   }, this.$t('DIoNjavzDRDTbj_SQ6F76')),
            //   h('Button', {
            //     props: {
            //       type: 'warning',
            //       size: 'small',
            //       icon: 'ios-search'
            //     },
            //     on: {
            //       click: () => {
            //         this.vipQuery(params.index)
            //       }
            //     }
            //   }, this.$t('RCbS5Zad49i72fgFI7qrX'))
            // ])
          }
        }
      ],
      data: [],
      formData: {},
      rechargeFormData: {}
    }
  },
  created () {
    this.queryTable()
  },
  computed: {
    formTitle () {
      return (this.status === 'new' ? this.$t('N8xdbBoV-d6Vc33tKrGGm') : this.$t('3cH_U2GeBUW1V74W8oDNv')) + this.$t('Suy-lCsVF73mBwsmrRd2U')
    }
  },
  methods: {
    addCustomerIcCard () {
      this.formData = {
        id: '',
        custid: this.customId,
        pwd: '',
        balance: '',
        enableflag: '1',
        cardpeople: ''
      }
      this.status = 'new'
      this.formModal = true
    },
    icCardManager () {

    },
    vipSetting () {

    },
    icQuery (index) {
      const cus = this.data[index]
      this.setCustom(cus)
    },
    vipQuery () {

    },
    searchTable () {
      this.queryTable()
    },
    async queryTable () {
      this.loading = true
      const { code, data, desc } = await getCustomerCardIdList({
        custid: +this.customId
      })
      if (code == 200) {
        const datalist = data.datalist || []
        this.data = datalist
      } else {
        this.$Message.error(desc)
      }
      this.loading = false
    },
    editItem (index) {
      const item = this.data[index]
      this.formData = {
        ...item,
        custid: item.custid + '',
        balance: item.balance + '',
        enableflag: item.enableflag + ''
      }
      this.status = 'edit'
      this.editIndex = index
      this.formModal = true
    },
    deleteItem (index) {
      this.$Modal.confirm({
        title: this.$t('oiW2WYZoyJSt3j7yCy10e'),
        content: this.$t('KePcPzUJR7hEB6lp4nEtV'),
        onOk: async () => {
          // this.data.splice(index, 1)
          const { code, desc } = await deleteCustomerCardId({
            id: this.data[index].id + ''
          })
          if (code == 200) {
            this.$Message.success(this.$t('hWGIgDqZtmSWFd9gU3Ya7'))
            this.queryTable()
          } else {
            this.$Message.error(desc)
          }
        }
      })
    },
    rechargeItem (index) {
      this.rechargeFormData = {
        custid: this.data[index].custid,
        cardid: this.data[index].id,
        rechargemoney: '',
        rechargebeforemoney: this.data[index].balance,
        rechargeoperator: this.$store.state.user.userName
      }
      this.rechargeFormModal = true
    },
    recordItem (index) {
      this.selectCardId = this.data[index].id + ''
      this.recordFormModal = true
    },
    success (desc) {
      if (this.status === 'new') {
        this.$Message.success(desc || this.$t('38AWpi9C1Z7eLtpj1TEfD'))
      } else {
        this.$Message.success(desc || this.$t('qDM1Ic0NDNp4weHsjQ4sN'))
      }
      this.formModal = false
      this.queryTable()
    },
    rechargeSuccess (desc) {
      this.$Message.success(desc || this.$t('OvC6puLJAI3Lw02w626tH'))
      this.rechargeFormModal = false
      this.queryTable()
    },
    fail (msg) {
      this.formModal = false
      this.$Message.error(msg)
    },
    rechargeFail (msg) {
      this.rechargeFormModal = false
      this.$Message.error(msg)
    },
    close () {
      this.formModal = false
      this.rechargeFormModal = false
    }
  }
}
</script>
